<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>

</head>

<body>
    <div id="box">
        <!-- <h1></h1>
        <h2></h2>
        <img src="" alt="">
        <p></p> -->
    </div>
    <script>
        let baseURL = 'http://localhost:8888';
        let http = axios.create({
            baseURL,
            headers: {
                'content-type': 'application/x-www-form-urlencoded'
            }
        });
        /*   4 - 列表进入详情页
                  列表a标签中 使用 href属性  href = 'item.html?id=商品id'
                  在item页面通过js 
                  获取url中搜索参数 location.search

                  提取对应的id，调用商品详情接口--拼字符串 展示到页面中
                  
                  */



        let search = location.search;
        console.log(search);
        // 获取url中搜索参数中id对应的值


        function getValue(str, key) {


            // str  -》'aa=11&bb=22
            // 2- -使用& 分割字符串 
            var arr = str.split('&');
            console.log(arr);//['a=11', 'b=22']

            // 保存循环中提取的结果
            var value;
            // 3-循环遍历 元素--字符串  
            arr.forEach(function (keyValue) {
                // console.log(keyValue);// xxx==xxx 
                // 获取等前面 和 后面的值 
                var keyValueArr = keyValue.split('=');//['a','11']  ['b','22']
                // console.log(keyValueArr);
                //判断，等号前面的值 是 a ，那么等号后的就是我们需要的结果
                if (keyValueArr[0] === key) {
                    // console.log(keyValueArr[1]);
                    //把结果保存到全局变量
                    value = keyValueArr[1]

                    // ------这里return  ，给这个函数参数的返回值，给不了外部函数返回值-如果这里是for循环，是可以在循环中中return 的
                    // return value;
                }
            })

            return value;

        }


        // var r = getValue('aa=11&bb=22', 'bb')//11
        // 利用13天 封装好的 函数 获取id对应的值
        var id = getValue(search.slice(1), 'id')//11
        console.log(id);

        // 调用 商品详情接口-获取商品信息
        let goodsItemAPI = '/goods/item/' + id;
        http.get(goodsItemAPI).then(r => {
            console.log(r.data.info);
            let { info } = r.data

            let str = ` <h1>${info.title}</h1>
                        <h2>${info.current_price}</h2>
                        <img src="${info.img_big_logo}" alt="">
                        <p>${info.goods_introduce}</p>`;

            document.querySelector('#box').innerHTML = str;
        })


    </script>

</body>

</html>